﻿@page "/xlsio/format-cells"
@inject Microsoft.JSInterop.IJSRuntime JS
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment hostingEnvironment
@using System.IO;

@using Syncfusion.Blazor.Buttons
@*Hidden:Lines*@

@using BlazorDemos.Data.FileFormats.XlsIO

@*End:Hidden*@
@inherits SampleBaseComponent;

<SampleDescription>
   <p>This sample demonstrates how to apply formatting to the cells using XlsIO.</p> 
</SampleDescription>
<ActionDescription>
   <p>Formatting worksheets makes them more attractive and easier to use. Excel provides various options for setting font, font size, color, and background. The Format Cells dialog in Excel has six tabs, each with several characteristics that allow you to set various formats for a cell. You can set number formats, horizontal and vertical alignment, text control operations, font and font styles, and borders for the cells.</p>
<p style='display: block'><b>Features:</b></p>
<ul>
<li>Various styles such as colors, font settings, borders, and alignments</li>
<li>Number formats</li>
<li>Patterns</li>
<li>Conditional formatting</li>
<li>RTF</li>
<li>Image insertion</li>
</ul>
</ActionDescription>

<div class="control-section">
    <p style="font-weight:normal">Click the button to view an Excel spreadsheet generated by Essential XlsIO. Please note that Microsoft Excel Viewer or Microsoft Excel is required to view the resultant document.</p>

    <div class="radio-control">
        <h5 class="row">Save As:</h5>
        <div class="e-radio-wrapper">
            <SfRadioButton Label="XLS" Name="XLS" Value=@("XLS") @bind-Checked="@excelVersion"></SfRadioButton>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <div class="e-radio-wrapper">
            <SfRadioButton Label="XLSX" Name="XLSX" Value=@("XLSX") @bind-Checked="@excelVersion"></SfRadioButton>
        </div>
    </div>
    <div class="button-section">
        <div id="button-control">
            <div class="row">
                <div>
                    <SfButton @onclick="FormatCellsXlsIO">Create Document</SfButton>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .radio-control {
        margin: 5% 0 2% 0;
    }

    .control-section .row {
        margin: 10px 0;
    }
</style>

@code {
    MemoryStream excelStream;
    string excelVersion = "XLSX";

    /// <summary>
    /// Create and download the Excel document with formatting applied to cells
    /// </summary>
    public async Task FormatCellsXlsIO()
    {
        FormatCellsService service = new FormatCellsService(hostingEnvironment);
        excelStream = service.FormatCellsXlsIO(excelVersion);
        if (excelVersion == "XLSX")
        {
            await JS.SaveAs("Sample.xlsx", excelStream.ToArray());
        }
        else
        {
            await JS.SaveAs("Sample.xls", excelStream.ToArray());
        }
    }
}
